<template>
	<view class="content">
		<view class="card">
			<button plain class="info-row icon-row flexr align-center"
				open-type="chooseAvatar" @chooseavatar="onchooseavatar">
				<text class="label flex-1">
					头像
				</text>
				<image class="user-icon" src="@/static/shop_removed.png"></image>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</button>
			<view class="divider"></view>
			<view class="info-row flexr align-center">
				<text class="label">
					账号
				</text>
				<text class="value flex-1">
					13414133415
				</text>
				<!-- <image class="arrow-right" src="@/static/arrow_right.png"></image> -->
			</view>
			<view class="divider"></view>
			<view class="info-row flexr align-center" @click="showNickDialog">
				<text class="label">
					昵称
				</text>
				<text class="value flex-1">
					只记今朝笑
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>
		
		<view class="card">
			<view class="info-row flexr align-center">
				<text class="label">
					会员等级
				</text>
				<text class="value flex-1">
					VIP2
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>
		
		<view class="card">
			<view class="info-row flexr align-center" @click="showDatePicker">
				<text class="label">
					生日
				</text>
				<text class="value flex-1">
					2006-05-24
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
			<view class="divider"></view>
			<view class="info-row flexr align-center" @click="showSexPicker">
				<text class="label">
					性别
				</text>
				<text class="value flex-1">
					女
				</text>
				<image class="arrow-right" src="@/static/arrow_right.png"></image>
			</view>
		</view>
		
		<uni-popup ref="nickRef"
			type="center" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<inputDialog
				title="修改昵称"
				placeholder="请输入昵称"
				@onCancel="onCancelChangeNick"
				@onConfirm="onConfirmChangeNick"
			></inputDialog>
		</uni-popup>
		
		<uni-popup ref="datePickerRef"
			@change="({show}) => datePickerShow = show"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<myDatePicker
				:show="datePickerShow"
				@onCancel="onCancelDatePicker"
				@onConfirm="onConfirmDatePicker"
			></myDatePicker>
		</uni-popup>
		
		<uni-popup ref="sexPickerRef"
			type="bottom" background-color="#fff"
			border-radius="30rpx" :mask-click="false">
			<sexPicker
				@onCancel="onCancelSexPicker"
				@onConfirm="onConfirmSexPicker"
			></sexPicker>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import inputDialog from '@/widgets/inputDialog.vue';
import myDatePicker from '@/widgets/myDatePicker.vue';
import sexPicker from '@/widgets/sexPicker.vue';
const nickRef = ref(null)
const datePickerRef = ref(null)
const datePickerShow = ref(false);
const sexPickerRef = ref(null)
function onchooseavatar(e) {
	const { avatarUrl } = e.detail
	console.log("onchooseavatar", avatarUrl)
}
function showNickDialog() {
	nickRef.value?.open()
}
function onCancelChangeNick() {
	console.log('onCancelChangeNick')
	nickRef.value?.close()
}
function onConfirmChangeNick() {
	nickRef.value?.close()
}
function showDatePicker() {
	datePickerRef.value?.open()
}
function onCancelDatePicker() {
	datePickerRef.value?.close()
}
function onConfirmDatePicker() {
	datePickerRef.value?.close()
}
function showSexPicker() {
	sexPickerRef.value?.open()
}
function onCancelSexPicker() {
	sexPickerRef.value?.close()
}
function onConfirmSexPicker() {
	sexPickerRef.value?.close()
}
</script>

<style lang="scss">
.content {
	padding: 32rpx;
	.card {
		background-color: white;
		border-radius: 12rpx;
		.info-row {
			padding: 0 32rpx;
			height: 96rpx;
			font-size: 28rpx;
			&.icon-row {
				height: 140rpx;
				border: none;
				text-align: left;
			}
			.label {
				color: $text-color1;
			}
			.value {
				color: $text-color5;
				text-align: right;
			}
			.user-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 48rpx;
			}
			.arrow-right {
				width: 15rpx;
				height: 24rpx;
				margin-left: 12rpx;
			}
		}
	}
	.card + .card {
		margin-top: 24rpx;
	}
}
</style>
